<div nz-row [nzGutter]="12">
    <div nz-col nzSpan="4">
        <nz-card>
            <device-class-tree (selectTree)="nodeChange($event)" [selectNode]="location"></device-class-tree>
        </nz-card>
    </div>
    <div nz-col nzSpan="20">
        <nz-card>
            <div nz-row>
                <div nz-col [nzSpan]="6">
                    <nz-form-item>
                        <nz-form-label nzFor="name">关键字</nz-form-label>
                        <nz-form-control>
                            <input nz-input [(ngModel)]="search.name" name="name" placeholder="编码/名称">
                        </nz-form-control>
                    </nz-form-item>
                </div>
                <div nz-col [nzSpan]="6">
                    <nz-form-item>
                        <nz-form-label nzFor="status">设备状态</nz-form-label>
                        <nz-form-control>
                            <nz-select [(ngModel)]="search.status" name="status" [nzPlaceHolder]="'请选择设备状态'" [nzShowSearch]="true">
                                <nz-option *ngFor="let i of statuss" [nzLabel]="i.text" [nzValue]="i.value">
                                </nz-option>
                            </nz-select>
                        </nz-form-control>
                    </nz-form-item>
                </div>
                <div nz-col [nzSpan]="6">
                    <button nz-button (click)="refresh(false,true)" [nzLoading]="loading" nzType="primary">
                        查询
                    </button>
                </div>
                <div nz-col [nzSpan]="6" style="text-align: right;">
                    <button nz-button (click)="goDetail(null)" [nzType]="'primary'">
                         <i nz-icon nzType="plus" theme="outline" ></i>
                        <span>新增</span>
                    </button>

                    <button nz-button type="reset" (click)="refresh(true)" class="mx-sm">重置</button>
                    <button nz-button (click)="export()" [nzLoading]="eloading" nzType="primary">
                        导入设备信息
                    </button>
                </div>
            </div>
            <div nz-row>
                <div nz-col [nzSpan]="24">
                    <ng-template #totalContentMe>共{{query.total}}条</ng-template>
                    <nz-table #deviceTable [nzData]="query.dataList" [nzFrontPagination]="false" [nzTotal]="query.total" [(nzPageIndex)]="query.pageIndex" [(nzPageSize)]="query.pageSize" [nzLoading]="loading" [nzShowSizeChanger]="true" (nzPageIndexChange)="refresh(false)"
                        [nzShowTotal]="totalContentMe" (nzPageSizeChange)="refresh(false)">
                        <thead>
                            <tr>
                                <th>编码</th>
                                <th>名字</th>
                                <th>位置</th>
                                <!-- <th>类型</th> -->
                                <th>制造商</th>
                                <th>状态</th>
                                <th>启用时间</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr *ngFor="let data of deviceTable.data">
                                <td>{{data.code}}</td>
                                <td>{{data.name}}</td>
                                <td>{{data.locationName}}</td>
                                <!-- <td>{{device.typeName}}</td> -->
                                <td>{{data.manufacturer}}</td>
                                <td style="text-align: center">
                                    <nz-badge *ngIf="data.status" [nzStatus]="'success'" [nzText]="'正常'"></nz-badge>
                                    <nz-badge *ngIf="!data.status" [nzStatus]="'error'" [nzText]="'报警'"></nz-badge>
                                </td>
                                <td>{{data.date}}
                                </td>
                                <td>
                                    <a (click)="goDetail(data)">编辑</a>
                                    <nz-divider nzType="vertical"></nz-divider>
                                    <a style="color:crimson;" (click)="del(data.id)">删除</a>
                                </td>
                            </tr>
                        </tbody>
                    </nz-table>
                </div>
            </div>
        </nz-card>
    </div>

</div>